<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item>
							<view class="swiper-item"><image src="https://editor.ajxqj.com/upload/zaigou/banner/20190612/5b47c3da2e0a4c6bad7b19723abe108a.jpg"></image></view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item"><image src="https://editor.ajxqj.com/upload/zaigou/banner/20190612/5b47c3da2e0a4c6bad7b19723abe108a.jpg"></image></view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item"><image src="https://editor.ajxqj.com/upload/zaigou/banner/20190612/5b47c3da2e0a4c6bad7b19723abe108a.jpg"></image></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="uni-flex uni-column nav-normal">
			<view class="uni-flex uni-row nav-item">
				<navigator url="/pages/project/inpack" hover-class="navigator-hover" class="flex-item">
					<view class="icon icon_yello"><text class="fa fa-user fa-2x"></text></view>
					<text class="mini">在装项目</text>
				</navigator>
				<navigator url="#" hover-class="navigator-hover" class="flex-item">
					<view class="icon icon_purple"><text class="fa fa-user fa-2x"></text></view>
					<text class="mini">完工项目</text>
				</navigator>
				<navigator url="#" hover-class="navigator-hover" class="flex-item">
					<view class="icon icon_blue"><text class="fa fa-user fa-2x"></text></view>
					<text class="mini">所有项目</text>
				</navigator>
				<navigator url="../personal_center/personal_center" hover-class="navigator-hover" class="flex-item">
					<view class="icon icon_orange"><text class="fa fa-user fa-2x"></text></view>
					<text class="mini">个人中心</text>
				</navigator>
			</view>
			<view class="uni-flex uni-row nav-item">
				<navigator url="#" hover-class="navigator-hover" class="flex-item">
					<view class="icon icon_red"><text class="fa fa-user fa-2x"></text></view>
					<text class="mini">素材库</text>
				</navigator>
				<navigator url="../upload/upload" hover-class="navigator-hover" class="flex-item">
					<view class="icon icon_orange"><text class="fa fa-user fa-2x"></text></view>
					<text class="mini">公司VR</text>
				</navigator>
				<navigator url="#" hover-class="navigator-hover" class="flex-item">
					<view class="icon icon_cyan"><text class="fa fa-user fa-2x"></text></view>
					<text class="mini">设置</text>
				</navigator>
				<navigator url="#" hover-class="navigator-hover" class="flex-item">
					<view class="icon icon_pink"><text class="fa fa-user fa-2x"></text></view>
					<text class="mini">客户咨询</text>
				</navigator>
			</view>
		</view>
		<button class="new_vr_btn" type="default" @click="addproject()">+新建全景项目</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 3000,
			duration: 3000
		};
	},
	onLoad: function() {
		uni.getStorage({
			key: 'cellphone',
			success: function(res) {},
			fail: function(res) {
				uni.navigateTo({
					url: '../login/index'
				});
			}
		});
	},
	onShow: () => {
		uni.getStorage({
			key: 'cellphone',
			success: function(res) {},
			fail: function(res) {
				uni.navigateTo({
					url: '../login/index'
				});
			}
		});
	},
	onTabItemTap: () => {
		uni.getStorage({
			key: 'cellphone',
			success: function(res) {},
			fail: function(res) {
				uni.navigateTo({
					url: '../login/index'
				});
			}
		});
	},
	methods: {
		addproject: function() {
			uni.navigateTo({
				url: '../project/project'
			});
		}
	}
};
</script>

<style lang="scss">
.swiper {
	height: 400rpx;
}
.swiper-item {
	height: 400rpx;
}

.nav-normal {
	background-color: #393c43;
	padding-bottom: 30rpx;
}
.nav-item {
	margin-top: 30rpx;
}
.uni-flex {
	display: flex;
}
.uni-column {
	flex-direction: column;
}
.uni-row {
	flex-direction: row;
}
.flex-item {
	width: 25%;
	text-align: center;
}
.flex-item text {
	color: white;
}
.mini {
	margin-top: 10rpx;
	font-size: 25rpx;
}
.icon text {
	color: white;
	line-height: 100rpx;
	text-align: center;
}
.commonColor {
	width: 100rpx;
	height: 100rpx;
	line-height: 100rpx;
	margin: 0 auto;
	border-radius: 50%;
}

.icon_yello {
	background-color: #fdb200;
	@extend .commonColor;
}
.icon_blue {
	background-color: #2aadfd;
	@extend .commonColor;
}
.icon_purple {
	background-color: #d680fd;
	@extend .commonColor;
}
.icon_orange {
	background-color: #ff8a09;
	@extend .commonColor;
}
.icon_red {
	background-color: #ff5152;
	@extend .commonColor;
}
.icon_cyan {
	background-color: #08dddb;
	@extend .commonColor;
}
.icon_pink {
	background-color: #f84b9d;
	@extend .commonColor;
}
.new_vr_btn{
	position: fixed;
	width: 500rpx;
	height: 80rpx;
	bottom: 130rpx;
	left: 50%;
	margin-left:-250rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	border-radius: 50rpx;
	background-color: #1890FF;
	color: white;
}
</style>
